import React, { useState } from "react";
import { Breadcrumb, Form, Input, DatePicker, Button, message } from "antd";
import { Link,history } from "umi";
import "./addwarr.less";
import axios from "axios";
import dayjs from "dayjs";
export default function Addwarr() {
  let [bxfw, setbxfw] = useState("");
  let [wxxm, setwxxm] = useState("");
  let [ts, setts] = useState("");
  let [bxr, setbxr] = useState("");
  let [date, setdate] = useState("");
  let add = async () => {
    let form = {
      bxfw,
      wxxm,
      ts,
      bxr,
      date: dayjs(date).format("YYYY-MM-DD"),
    };
    let {
      data: { code, msg },
    } = await axios.post("http://localhost:3000/addwarranty", form);
    if (code === 200) {
      openMessage()
      history.push('/warranty')
    }
  };
  const openMessage = () => {
    message.open({
      type: 'loading',
      content: 'Loading...',
      duration: 1,
    });
    setTimeout(() => {
      message.success({
        type: 'success',
        content:"添加成功",
        duration: 2,
      });
    }, 1000);
  };
  return (
    <div className="bigbox">
      <div className="header">
        <div className="header1">
          <Breadcrumb
            items={[
              {
                title: "物业服务",
              },
              {
                title: <Link to="/warranty">保修管理</Link>,
              },
              {
                title: "新建报修",
              },
            ]}
          />
          <h2>新建保修</h2>
        </div>
      </div>
      <div className="content">
        <div className="content1">
          <span>基础信息</span>
          <div className="content2">
            <Form>
              <Form.Item
                label="报修住户"
                name="bxfw"
                rules={[{ required: true, message: "报修户主姓名必须填写" }]}
              >
                <Input
                  style={{ width: 338 }}
                  placeholder="请输入报修人姓名"
                  value={bxfw}
                  showCount={true}
                  onChange={(e) => setbxfw(e.target.value)}
                ></Input>
              </Form.Item>
              <Form.Item
                label="保修项目"
                name="wxxm"
                rules={[{ required: true, message: "维修项目必须填写" }]}
              >
                <Input
                  style={{ width: 337 }}
                  placeholder="请输入维修项目"
                  value={wxxm}
                  onChange={(e) => setwxxm(e.target.value)}
                ></Input>
              </Form.Item>
              <Form.Item
                label="标题"
                name="ts"
                rules={[{ required: true, message: "标题必须填写" }]}
              >
                <Input
                  style={{ width: 365 }}
                  placeholder="请输入标题"
                  value={ts}
                  onChange={(e) => setts(e.target.value)}
                ></Input>
              </Form.Item>
              <Form.Item
                label="报修人"
                name="bxr"
                rules={[{ required: true, message: "报修人必须填写" }]}
              >
                <Input
                  style={{ width: 350 }}
                  placeholder="请输入标题"
                  value={bxr}
                  onChange={(e) => setbxr(e.target.value)}
                ></Input>
              </Form.Item>
              <Form.Item
                label="保修日期"
                name="date"
                rules={[{ required: true, message: "报修日期必须填写" }]}
              >
                <DatePicker
                  onChange={(e) => setdate(dayjs(e.$d).format("YYYY-MM-DD"))}
                  needConfirm
                  style={{ width: 337 }}
                  value={date}
                />
              </Form.Item>
              <Form.Item>
                <Button type="primary" onClick={add}>
                  提交
                </Button>
                <Button style={{ marginLeft: 30 }} onClick={()=>history.push("/warranty")}>返回</Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
}
